<!DOCTYPE HTML>
<html>
<head>
    <title>Projekktor - Design Template</title>
    <style type="text/css">
	body { background-color: #fdfdfd; padding: 10px; margin: 0; color:#000; font: 13px/18px monospace; }

	.projekktor {
	    border: 1px dashed green;
	    padding: 10px;
	    width: 800px;
	}
	
	.pplogo {
	    width: 50px;
	    height: 50px;
	    background-color: #30FCFC;
	}
	
	/*
	    in case you add the class "fade" to your control-bar make sure it is
	    also set invisible once inactive - e.g. via "display: none / block"
	*/
	
	.ppcontrols {
	    padding: 10px;
	    margin: 5px;
	}
	
	.ppcontrols.inactive {
	    background-color: transparent;
	    border: 1px solid red;
	    color: #333333;	
	    /* display: none;  */
	}
    
	.ppcontrols.active {
	    background-color: transparent;
	    border: 1px solid green;
	    color: #333333;
	    /* display: block;  */
	}
    
    
	.inactive {
	    color: #333333;
	    background-color: #ccc;
	}
	
	.active {
	    background-color: green;
	    color: #fdfdfd;
	}
	
	/*
	    if you want the display to stretch on "fullscreen" mode you
	    have to work with relative dimensions and absolute positioning
	*/
	.ppdisplay {
	    width: 200px;
	    height: 200px;
	    position: relative;
	    display: block;
	    background-color: #FF1EB0;
	    margin: 10px;
	}
	
	.ppvslider, .ppscrubber {
	    width: 350px;
	    height: 25px;
	    border: 1px solid blue;
	    position: relative;
	}
	
	.ppvmarker, .pploaded, .ppplayhead {
	    background-color: blue;
	    height: 25px;
	    position: absolute !important;
	    cursor: pointer;
	}
	
	.ppplayhead {
	    background-color: red;
	}
	
	.ppvknob {
	    border: 1px solid #000;
	    height: 25px;
	    width: 5px;
	    position: absolute;
	    cursor: pointer;
	}
	
    </style>

    <!-- Load jquery -->
    <script type="text/javascript" src="jquery.min.js"></script>

    <!-- load projekktor -->
    <script type="text/javascript" src="projekktor.min.js"></script>

</head>
<body>

<div id="player_a" class="projekktor">

    <!-- display holds all visual media elements to be played back -->
    <div class="ppdisplay"></div>
    	
    <!-- and optional logo the operator may set -->
    <img class="pplogo" src="yourlogo.png" />
    
    <!-- the buffering-indicator - typically an animated gif or something -->
    <div class="ppbuffering">buffering</div>
    
    <!-- the start button - typically centered to "display" -->
    <div class="ppstart">start</div>    
    
    
    
    <!-- Adding the class "fade" to "ppcontrols" will cause the controlbar-DOM to: -->
    <!-- 1. Be invisible if player is IDLE -->
    <!-- 2. Fade in on mouse over player -->
    <!-- 3. Fade out if mouse leaves player -->
    <!-- Make sure you set appropriate .active and .inactive CSS then (see design.css) -->
    
    <!-- controlbar / wrapping it up this way is optional-->
    <div class="ppcontrols">
	
	<b>controlbar plugin:</b>
	
	<h3 class="pptitle">title display</h3>
	
	<div class="ppplay">play</div>
	
	<div class="pppause">pause</div>
	
	<div class="ppstop">stop</div>
	
	<div class="ppprev">prev</div>
	
	<div class="ppnext">next</div>
	
	<div class="pprewind">rewind</div>
	
	<div class="ppforward">forward</div>
	
	<div class="ppfsexit">exit fullscreen</div>
	
	<div class="ppfsenter">enter fullscreen</div>
	
	<div class="pploopon">loop ON</div>
	
	<div class="pploopoff">loop OFF</div>	
	
	<b>scrubber / time control</b>
	
	<!-- start: scrubber bar -->
	<div class="ppscrubber"> <!-- the rail  -->
	    <div class="pploaded"></div> <!-- percent buffered indicator (width in %), clickable -->
	    <div class="ppplayhead"></div> <!-- percent elapsed / playhead position (width in %), clickable -->
	</div>
	<!-- end: scrubber bar -->

	<p>
	    Duration  : <span class="pphr_dur"></span> hours <span class="ppmin_dur"></span> minutes and <span class="ppsec_dur"></span> seconds<br/>
	    Remaining : <span class="pphr_rem"></span> hours <span class="ppmin_rem"></span> minutes and <span class="ppsec_rem"></span> seconds<br/>
	    Elapsed   : <span class="pphr_elp"></span> hours <span class="ppmin_elp"></span> minutes and <span class="ppsec_elp"></span> seconds<br/>
	</p>
	
	
	<b>volume control</b>

	<!-- start: volume slider -->
	<div class="ppvslider"> <!-- the rail, clickable -->
	    <div class="ppvmarker"></div> <!-- value indicator bar (width in %), clickable -->
	    <div class="ppvknob"></div> <!-- draggable knob -->
	</div>
	<!-- end: volume slider -->
	
	
	<!-- adding the class "toggle" to one or more of the following DOMs will -->
	<!-- toggle them accordingly to their function and current volume -->
	<!-- e.g. "mute" will be set to "inactive" if volume is "0" because at volume zero -->
	<!-- the player is already muted. -->
	
	<div class="ppmute">mute</div>
	
	<div class="ppvmax">maximum volume</div>
	
	<div class="ppunmute">unmute (restore volume)</div>
	
	
    </div>
</div>


<script type="text/javascript">

    // instantiate Projekktor
    $(document).ready(function() {
	projekktor('#player_a', {
	    width: false,  			// prevent auto-resizeing of player DOM
	    height: false, 			// prevent auto-resizeing of player DOM
	    cssClassPrefix: 'pp', 		// pp => "Projekktor Player" (default)
	    title: 'Lorem Ipsum TV',		// some dummy title
	    controls: true,			// controls are disabled (inactive) if set to FALSE
	    autoplay: false, 			// autoplay sometimes saves one click while testing new layouts
	    poster: 'layout-grid.gif',
	    
	    // this playlist adds a dummy video with a duration of 2 hours:
	    playlist: [
		{
		    0:{src:'layout-grid.gif', type:'image/gif'},
		    config: {
			duration: 7200,
			title: 'Lorem Ipsum TV'
		    }
		}
	    ]
	    // if you prefer a real video uncomment and customize this:
	    /*
	    playlist: [
		{
		    0:{src:'intro.ogv', type:'video/ogg'},
		    1:{src:'intro.mp4', type:'video/mp4'},
		    2:{src:'intro.webm', type:'video/webm'},
		    config: {
			title: 'Lorem Ipsum TV'
		    }
		}
	    ]
	    */
	}); 
    });
    
</script>
</body>
</html>
